<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="static/js/jquery.min.js"></script>
		<link rel="stylesheet" href="static/css/semantic.min.css">
		<link rel="stylesheet" href="static/css/element.css">
		<script src="static/js/vue.min.js"></script>
		<script src="static/js/element.js"></script>
		<script src="static/js/axios.min.js"></script>
	</head>
	<body>
	    <div id="app">


		<div v-if="!editVisible">
			<h2 class="ui teal header" style="text-align: center;margin-top: 10px;">欢迎来到地址管理</h2>
		<table class="ui celled table" width="50%" height="35%" style="text-align: center!important;">



	<thead>

	<tr style="color: #000000;">
		<th>序号</th>

		<th>用户编号</th>
		<th>用户名</th>
		<th>用户电话</th>
		<th>省份</th>
		<th>城市</th>
		<th>地区</th>
		<th>街道</th>
		
	
		<th>
			
				<a class="ui teal basic circular mini button"  @click="handleAdd()">添加地址 </a>


	</th>

	
	</tr>


</thead>
<tbody>
<template v-for="(ad,index) in address">
	<tr >
		<td>{{ad.addrId}}</td>
			<td>{{ad.userId}}</td>
		<td >{{ad.receiverName}}</td>
		<td >{{ad.receiverMobile}}</td>
		<td >{{ad.province}}</td>
		<td >{{ad.city}}</td>
		<td >{{ad.area}}</td>
		<td >{{ad.addr}}</td>

		




		<td>
			<a class="ui teal basic mini button" @click="edit(ad.addrId)">
				修改</a>
			<a class="ui red basic mini button" @click="del(ad.addrId)">删除</a>

		</td>



	</tr>	
</tbody>
</template>


</table>



<el-dialog title="收货地址添加" :visible.sync="dialogFormVisible">
	<el-form :model="form" >
	  <el-form-item label="姓名" :label-width="formLabelWidth">
		<el-input v-model="form.receiverName" autocomplete="off"></el-input>
	  </el-form-item>
	
	  <!--  -->
	  <el-form-item label="手机号" :label-width="formLabelWidth">
		<el-input
		v-model.number="form.receiverMobile"
		placeholder="输入"
		type="number"
		@blur="dataBlur(form.receiverMobile)"
		max-length="12"
	  >

	  </el-form-item>
	  
	  <el-form-item label="省份" :label-width="formLabelWidth">
		<el-input v-model="form.province" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="城市" :label-width="formLabelWidth">
		<el-input v-model="form.city" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="地区" :label-width="formLabelWidth">
		<el-input v-model="form.area" autocomplete="off"></el-input>
	  </el-form-item>

	  <el-form-item label="街道" :label-width="formLabelWidth">
		<el-input v-model="form.addr" autocomplete="off"></el-input>
	  </el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
	  <el-button @click="dialogFormVisible = false">取 消</el-button>
	  <el-button type="primary" @click="saveAddress(form)" :disabled="disabled">确 定</el-button>
	</div>
  </el-dialog>











</div>
<div v-else>
	<center>

		<div class="ui container">

			<h2>地址信息</h2>
			{{address1[0]}}
			<form method="post">

				<div class="ui basic teal label">用户编号</div>
				<div class="ui fluid input">
					<input type="text" v-model="address1[0].addrId" name="addrId" readonly>
				</div>

				
	
				<label class="ui basic teal label">用户名</label>
				<div class="ui fluid  input">
					<input type="text" name="receiverName" v-model="address1[0].receiverName" class="form-control">
	
				</div>
	
				<label class="ui basic teal label">用户电话</label>
				<div class="ui fluid input">
				   <input type="text" name="receiverMobile" class="form-control" v-model="address1[0].receiverMobile">
				</div>
	
				<label class="ui basic teal label"> 省份:</label>
				<div class="ui fluid input">
					<input type="text" name="province" class="form-control" v-model="address1[0].province">
				</div>

				<label class="ui basic teal label"> 城市:</label>
				<div class="ui fluid input">
					<input type="text" name="city" class="form-control" v-model="address1[0].city">
				</div>

				<label class="ui basic teal label"> 地区:</label>
				<div class="ui fluid input">
					<input type="text" name="area" class="form-control" v-model="address1[0].area">
				</div>

				<label class="ui basic teal label"> 街道:</label>
				<div class="ui fluid input">
					<input type="text" name="addr" class="form-control" v-model="address1[0].addr">
				</div>
	
	
	
	
				<input type="submit" class="ui teal basic button" @click="save"  value="提交"/>
				<button onclick="window.history.go(-1)" onclick="window.history.go(-1)"class="ui teal basic button">返回</button>
	
	
			</form>
	
	
		</div>

	</center>


	



</div>



		</div>
		
			


		<!-- script -->
		<script src="static/css/semantic.min.css"></script>
		<script src="static/js/cookie_utils.js"></script>

		<script src="static/js/base.js"></script>


		<!--实现检索功能 Jquery-->




	<script>
			   $(function(){
        $('#ss').click(function(){
            var sstxt=$('#filtertxt').val();
            $("table tbody tr")
                .hide()
                .filter(":contains('"+sstxt+"')")
                .show();
        })

    });
	
	


	new Vue(	{
				el:'#app',
				data:{
					dialogFormVisible:false,
					disabled:false,
					form: {
						receiverName:'',
						receiverMobile:'',
						province:'',
						city:'',
						area:'',
						addr:'',
         
						userId:''

        },

		
		formLabelWidth: '120px',
					editVisible:false,
					// message:"success"
				   address:[],
        //  通过addrId查询得到的address1
				   address1:[],
				   addrId:"",
				   receiverName:"",
				   receiverMobile:"",
				   province:"",
				   city:"",
				   area:"",

				   token:"",

				},
				created() {	
					
					this.handleSearch();
				
					
				},
				methods: {

					dataBlur(val){
						console.log(val)
					
						let reg1 = new RegExp(/^\d+$/);
						if(reg1.test(val)){
							ELEMENT.Message.error("你的用户不可以为空");
						}

					},
					saveAddress(form){
						console.log(form);
						this.form.userId=getCookieValue("userId");

						if(form.receiverName==null || form.receiverName==''){
							ELEMENT.Message.error("你的用户不可以为空");
							return;
						}
						if(form.receiverMobile==null || form.receiverMobile==''){
							ELEMENT.Message.error("你的手机号不可以为空");
							return;
						}
						// if(form.receiverMobile.length()>11 || form.receiverMobile.length()<9){
						// 	ELEMENT.Message.error("你的手机号长度为9-11");
						// 	return;
						// }
						if(form.province==null || form.province==''){
							ELEMENT.Message.error("你的省份不可以为空");
							return;
						}
						if(form.city==null || form.city==''){
							ELEMENT.Message.error("你的城市不可以为空");
							return;
						}
						console.log(form,"--------")

						
						var url5=baseUrl+"useraddr/add";

						axios({
							url:url5,
							method:"POST",
							data:form

						}).then(res=>{

							ELEMENT.Message.success("添加地址成功");
							this.disabled=true;
							this.handleSearch();



						}

						)

					},
					handleSearch() {
						 this.token=getCookieValue("token");

						var userId=getCookieValue("userId");
						console.log(userId);
						var url1=baseUrl+"useraddr/list";
						axios({
							url:url1,
							methods:"get",
							params:{
							token:this.token,
							userId:userId
							}
						}).then((res)=>{
							this.address=res.data.data;
							console.log(res.data.data);
						});
					
						
						
					},
					//添加
					handleAdd(){
						this.disabled=false;
						this.dialogFormVisible = true;
					
							
						},
						//编辑 
					 edit(index){
						 this.editVisible=true;
						 console.log(index);
						 var url2=baseUrl+"useraddr/queryByAddrId";
						 axios({
							 url:url2,
							 method:"get",
							 params:{
								addrId:index,
								token:this.token, 
							 }
							 
							

						 }).then(res=>{
							this.address1=res.data.data;
						
							console.log("根据地址Id查询出来的地址");
							
							console.log(this.address1);
						 });

						},

						save(){
						// 	var jsonString = this.address1; //json字符串
                        //    var ToObject = eval( '(' + jsonString + ')' );
 						// 	console.log(ToObject);

						// 	//  
						 var url5=baseUrl+"useraddr/update";

						 axios({
							 url:url5,
							 method:"post",
							 data:this.address1[0]


						 }).then(res=>{

							console.log("更新成功")

						 });
					    this.handleSearch();
						},

						// 删除
						del(index){
							var url3=baseUrl+"useraddr/deleteByAddrId";
							axios({
								url:url3,
								method:"delete",
								params:{
									token:this.token,
									addrId:index
								}
								


							}).then(res=>{
								ELEMENT.Message.success("用户地址删除成功");
							
							});

							// 删除之后在重新查询一遍
							this.handleSearch();

						},
						// 取消
						editCancel(){
							this.editVisible=false;
						},
						

				},
				

			})
				</script>
				
	

				<!-- 使用Jquery进行前端数据的校验 -->

				<script>
					$('.ui.form').form({
						fields:{
							/*对里面的title的输入进行相关的验证，
							* type: 验证是否为空*/
							receiverName:{
								identifier:'receiverName',
								rules:[{
				
									type:'empty',
									//这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
									prompt:'用户名字不可以为空'
								}]
				
							},
							receiverMobile:{
								identifier:'receiverMobile',
								rules:[{
				
									type:'empty',
									//这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
									prompt:'接收手机号码不可以为空'
								}]
				
							},
							province:{
								identifier:'province',
								rules:[{
				
									type:'empty',
									//这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
									prompt:'省份不可以为空'
								}]
				
							},
							city:{
								identifier:'city',
								rules:[{
				
									type:'empty',
									//这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
									prompt:'城市不可以为空'
								}]
				
							},
							area:{
								identifier:'area',
								rules:[{
				
									type:'empty',
				
									prompt:'地区不可以为空'
								}]
				
							},
							addr:{
								identifier:'addr',
								rules:[{
				
									type:'empty',
									//这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
									prompt:'街道信息不可以为空'
								}]
				
							},
				
						}
				
					});
				
				</script>


			</body>
</html>
